<template>
  <div>
    <nav-bar>
      <div slot="center">个人辅助工时申请</div>
    </nav-bar>
    <van-nav-bar
      class="app-nav-bar"
      title="个人辅助工时申请"
      left-arrow
      @click-left="onClickLeft()"
    />

    <div style="margin-top: 136px">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="usercode"
          name="usercode"
          label="工号"
          placeholder="工号"
          :rules="[{ required: true, message: '请填写工号' }]"
        />
        <van-field
          v-model="applyContent"
          name="applyContent"
          label="工作内容"
          placeholder="工作内容"
          :rules="[{ required: true, message: '请填写工作内容' }]"
        />
        <van-field
          v-model="standardTime"
          name="standardTime"
          label="标准工时"
          placeholder="标准工时"
          :rules="[{ required: true, message: '请填写工作用时' }]"
        />
        <van-field
          readonly
          clickable
          name="startTime"
          :value="startValue"
          label="开始时间"
          placeholder="点击选择时间"
          @click="showStarPicker = true"
        />
        <van-popup v-model="showStarPicker" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="请选择时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmStart"
            @cancel="showStarPicker = false"
            :formatter="formatter"
          />
        </van-popup>

        <van-field
          readonly
          clickable
          name="endTime"
          :value="endValue"
          label="结束时间"
          placeholder="点击选择时间"
          @click="showEndPicker = true"
        />
        <van-popup v-model="showEndPicker" position="bottom">
          <van-datetime-picker
            v-model="endDate"
            type="datetime"
            title="请选择时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmEnd"
            @cancel="showEndPicker = false"
            :formatter="formatter"
          />
        </van-popup>

        <van-field name="stepper" label="频次选择">
          <template #input>
            <van-stepper v-model="stepper" />
          </template>
        </van-field>

        <!-- <van-field name="uploader" label="上传照片">
          <template #input>
            <van-uploader v-model="uploader" multiple :max-size="500 * 1024" @oversize="onOversize" :max-count="2" />
          </template>
        </van-field> -->

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit" name="status"
            >提交</van-button
          >
        </div>
      </van-form>
      <!-- <div style="font-size: 0.37333rem;color: #646566;width: 10rem;overflow: hidden;">提交信息：{{submitInfo}}</div> -->
    </div>
  </div>
</template>

<script>
import { submitApplyInfo } from "../../api/perfrom";
import NavBar from '../../components/NavBar.vue'

export default {
  name: "applyTime",
  data() {
    return {
      username: "",
      usercode: "",
      applyContent: this.$route.params.content,
      standardTime: this.$route.params.useTime,
      startValue: "",
      endValue: "",
      showStarPicker: false,
      showEndPicker: false,
      stepper: 1,
      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
      submitInfo: "",
      minDate: new Date(2021, 1, 1),
      maxDate: new Date(2024, 12, 30),
      currentDate: new Date(),
      endDate: new Date(),
    };
  },
  components: {
    NavBar,
  },
  mounted() {
    const user = JSON.parse(window.localStorage.user);
    if (user) {
      this.username = user.username;
      this.usercode = user.usercode;
    } else {
      Dialog.confirm({
        message: "当前没有登录信息,请点击确认跳转登录",
        theme: "round-button",
        closeOnClickOverlay: true,
        confirmButtonColor: "#066ef4",
        cancelButtonColor: "#1890FF",
      })
        .then(() => {
          this.$router.push("/login");
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push("/perform/applyList");
    },
    onConfirmStart(dateData) {
      console.log(dateData);
      var date = new Date(dateData);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var mi = date.getMinutes();
      mi = mi < 10 ? "0" + mi : mi;
      const time = y + "-" + m + "-" + d + " " + h + ":" + mi;
      console.log(dateData);
      this.startValue = time;
      this.showStarPicker = false;
    },
    onConfirmEnd(dateData) {
      var date = new Date(dateData);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var mi = date.getMinutes();
      mi = mi < 10 ? "0" + mi : mi;
      const time = y + "-" + m + "-" + d + " " + h + ":" + mi;
      this.endValue = time;
      this.showEndPicker = false;
    },
    formatter(type, val) {
      if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      } else if (type === "year") {
        return `${val}年`;
      }
      return val;
    },
    onSubmit(values) {
      submitApplyInfo(values)
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.$toast.success("上传成功");
            this.$router.push("/perform/applyList");
          } else {
            this.$toast.fail("上传失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onOversize(file) {
      console.log(file);
      this.$toast("文件大小不能超过 500kb");
    },
  },
};
</script>

<style>
</style>
